<template>
  <div class="swiper">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in state.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// 引入接口实例
import {getBanner} from '@/request/api/home'
import axios from 'axios'
import {reactive, onMounted } from 'vue';
export default {
  setup() {
    // 使用reactive响应式对象保存图片
    const state = reactive({
        images:[
      "https://unpkg.com/@vant/assets/apple-1.jpeg",
      "https://unpkg.com/@vant/assets/apple-2.jpeg",
    ]
    });
    // 在onmounted阶段获取轮播图数据
    onMounted(async() => {
        // axios.get('http://localhost:3000/banner?type=2').then(res=>{
        //     console.log(res);
        //     state.images = res.data.banners
        // })
        let res = await getBanner();
        state.images = res.data.banners
    })
    return { state };
  },
};
</script>

<style lang="less">
.swiper {
    padding: 0 .2rem;
  .van-swipe {
    width: 100%;
    .van-swipe__track {
      .van-swipe-item {
        img {
          width: 100%;
          height: 3rem;
        }
      }
    }
    .van-swipe__indicator--active {
                background-color: #dd001b;
            }
  }
}
</style>